@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

.treeNode {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}

.treeNodeIcon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  color: $sys-neutral-text-support;

  svg {
    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
  }
}

.treeNodeTitle {
  flex-grow: 1;
  box-sizing: border-box;
  min-width: $size-tree-item-checkbox-wrap;
  color: $sys-neutral-text-main;
}

.treeNodeActions {
  display: flex;
  visibility: hidden;

  &:focus-visible, &[data-focused] {
    visibility: visible;
  }
}

.treeNodeContent {
  @include composite-var($tree-item-content-layout);

  cursor: pointer;

  position: relative;

  display: flex;
  align-items: center;

  box-sizing: border-box;
  width: 100%;

  &::before {
    pointer-events: none;
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    box-sizing: border-box;
    width: 100%;
    height: 100%;

    opacity: 0;
    background-color: $sys-neutral-accent-default;
    border-radius: inherit;
  }

  &:hover, &:focus-visible, &[data-droplist-active] {
    &::before {
      opacity: $opacity-a008;
    }

    .treeNodeActions {
      visibility: visible;
    }
  }

  &:focus-visible {
    @include outline-inside-var($container-focused-s);

    outline-color: $sys-available-complementary;
  }

  &[data-multiselect] {
    cursor: default;
  }

  &[aria-disabled='true'] {
    cursor: not-allowed;

    &::before {
      display: none;
    }

    .treeNodeTitle, .treeNodeIcon {
      color: $sys-neutral-text-disabled;
    }
  }

  &[aria-selected='true']:not([data-multiselect]) {
    &::before {
      opacity: $opacity-a008;
      background-color: $sys-primary-accent-default;
    }

    &:hover {
      &::before {
        opacity: $opacity-a016;
      }
    }
  }
}

.treeNodeCheckboxWrap {
  @include composite-var($tree-item-checkbox-wrap);

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.treeNodeExpandButton {
  box-sizing: border-box;

  svg {
    transition: transform 0.2s ease;
  }

  &[data-expanded] {
    svg {
      transform: rotate(90deg);
    }
  }
}
